<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>爱宠朋友圈</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="#(CPATH)/view/css/jquery-weui.css" />
    <link rel="stylesheet" href="#(CPATH)/view/css/style.css" />
    <link rel="stylesheet" href="#(CPATH)/view/weui/style/weui.css">
    <link rel="stylesheet" href="#(CPATH)/view/weui/example/example.css">
    <script src="#(CPATH)/view/js/jquery.js"></script>
    <script src="#(CPATH)/view/js/lib.js"></script>
    <script src="#(CPATH)/view/js/jquery-weui.js"></script>
    <link rel="stylesheet" href="#(CPATH)/view/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="#(CPATH)/_view/static/layer_mobile/layer.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
</head>

<body class=" bdclass-z2">
<div class="weui-gallery" id="gallery">
            <span class="weui-gallery__img" id="galleryImg"></span>
            
        </div>
    <!-- 头部 -->
    <!-- 头部 -->
    <!-- 内容 -->
    <div class="main">
        <div class="m-top js-pop">
            <img src="#(CPATH)#(picRecord.pic??'')" id="imgUrl" alt="" class="bg-t">
            <div class="head-name">
                <div class="txt">
                  	#(record.nickname??'')
                </div>
                <div class="head js-pop">
                    <img src="#(record.avatar??'')" alt="">
                </div>
            </div>
        </div>
        <ul class="ul-list3" id="animal_record">
        
        </ul>
        <div class="g-btn1">
            <div class="con"><a href="#(CPATH)/animalRecord/person" class="a-btn1">成长脚印</a></div>
            <div class="con"><a href="#(CPATH)/animalRecord/review" class="a-btn1">个人回顾</a></div>
        </div>
        <div class="pop-z1" style="display: none;">
            <div class="pop-body">
                <div class="item">
                    <a href="javascript:choicePicture();">更换相册封面</a>
                </div>
                <div class="item">
                    <a href="javascript:;" class="js-close">取消</a>
                </div>
            </div>
        </div>
<script src="#(CPATH)/view/layui/layui.js" charset="utf-8"></script>
<script>

var $gallery = $("#gallery"), $galleryImg = $("#galleryImg"),
$uploaderFiles = $("#animal_record"),
tmpl = 'background-image:url(#url#)',
pageNum = 1;
;

$uploaderFiles.on("click", "img", function(){
	var urlStr = tmpl.replace('#url#', this.getAttribute("src"));
    $galleryImg.attr("style", urlStr);
    $gallery.fadeIn(100);
});
$gallery.on("click", function(){
    $gallery.fadeOut(100);
});

wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '#(appId)', // 必填，公众号的唯一标识
    timestamp: #(timestamp), // 必填，生成签名的时间戳
    nonceStr: '#(noncestr)', // 必填，生成签名的随机串
    signature: '#(signature)',// 必填，签名
    jsApiList: [
		'chooseImage'
		,'previewImage'
		,'uploadImage'
		,'downloadImage'
    ] // 必填，需要使用的JS接口列表
});

layui.use('flow', function(){
  var flow = layui.flow;
  var totalPage = 0;
  
  flow.load({
    elem: '#animal_record' //流加载容器
    ,scrollElem: '#animal_record' //滚动条所在元素，一般不用填，此处只是演示需要。
    ,done: function(page, next){ //执行下一页的回调
      
      //模拟数据插入
      setTimeout(function(){
        var lis = [];
        $.ajax({
    		type: "post",
    		url: "#(CPATH)/animalRecord/list",
    		data: {
    			  "pageNumber": pageNum
    			  ,"type": 'all'
    		},
    		dataType: "JSON",
    		async: false,
    		success: function(data) {
    			pageNum = pageNum + 1;
    			totalPage = data.totalPage;
    			var datalist = data.list;
    			for(var i = 0; i < datalist.length; i++) {
    				var record = datalist[i];
    				var remark = '';
    				var idea = record.idea;
    				if( idea == null){
    					idea = '';
    				}
    				
    				var str = ' <li><div class="head"><img src="' + record.avatar + '" alt=""></div>'
          	          + '<div class="txt-img">' + record.nickname + ''
          	          + '<p class="p-txt">' + idea + '</p>'
          	          + '<div class="m-pic">'
          	          ;

          	        var urls = record.pics.split(",");
          	        for(var j=0;j<urls.length;j++){
          	        	if(urls[j] != ''){
          	        		str += '<div class="con"><div class="pic"><img src="#(CPATH)' + urls[j] +'"></div></div>';
          	        	}
          	        }
          	        str += '</div><div class="txt-b"><span>' + record.record_date_formart + '   ' + record.position + '</span></div> </div> </li>';
          			lis.push(str)
    			}
    		},
    		error: function() {}
    	});
        
        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
        next(lis.join(''), page < totalPage); //假设总页数为 10
      }, 500);
    }
  });
  
  
});
</script>
<script>

var localIds = [];
function choicePicture(){
    wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
        	layer.open({type: 2});
            localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            $(".pop-z1").stop().fadeOut();
            syncUpload();
        }
    });
}

function syncUpload() {
    if (localIds.length) {
        var localId = localIds.pop();
        wx.uploadImage({
            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 0, // 默认为1，显示进度提示
            success: function (res) {
                var mediaId = res.serverId; // 返回图片的服务器端ID，即mediaId
                //将获取到的 mediaId 传入后台 方法savePicture
                $.ajax({
					type: "post",
					url: "#(CPATH)/animalRecord/saveImages",
					data: {
						"mediaId" : mediaId
						,"flag" : 'insert'
					},
					dataType: "JSON",
					async: false,
					success: function(data) {
                    	$("#imgUrl").attr('src','#(CPATH)' + data.filePath); 
                    	layer.closeAll('loading');
					},
					error: function() {}
				});		
            },
            fail: function (res) {
                layer.msgModal('上传图片失败，请重试')
            }
        });
    }else{
    	layer.closeAll('loading');
    }
}
</script>
        <script>
            $(".js-pop").click(function() {
                $(".pop-z1").stop().fadeIn();
            });
            $(".js-close").click(function() {
                $(".pop-z1").stop().fadeOut();
            });
        </script>
    </div>
    <!-- 内容 -->
    <!-- 底部 -->
    <!-- 底部 -->